<div class="card">
  <div class="card-header">
    <h5 class="card-title">批次查询</h5>
  </div>
  
  <!-- API错误提示 -->
  <div *ngIf="apiError" class="card-body border-bottom bg-light">
    <div class="alert alert-warning mb-0">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <strong>提示：</strong> 由于后端API未就绪，当前显示的是模拟数据。
        </div>
      </div>
    </div>
  </div>
  
  <!-- 搜索条件区域 -->
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="row mb-2">
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">货品:</label>
            <input type="text" class="form-control" [(ngModel)]="queryParams.GoodsCodeOrName" name="GoodsCodeOrName" placeholder="请输入货品名称/编号">
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">货品类型:</label>
            <select class="form-select" [(ngModel)]="queryParams.GoodsType" name="GoodsType">
              <option [ngValue]="null">全部</option>
              <option *ngFor="let type of goodsTypeOptions" [value]="type">{{ type }}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">单位:</label>
            <input type="text" class="form-control" [(ngModel)]="queryParams.Unit" name="Unit" placeholder="请输入单位">
          </div>
        </div>
      </div>
      
      <div class="row mb-2">
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">仓库名称:</label>
            <select class="form-select" [(ngModel)]="queryParams.WarehouseName" name="WarehouseName">
              <option [ngValue]="null">全部</option>
              <option *ngFor="let warehouse of warehouseOptions" [value]="warehouse">{{ warehouse }}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">生产日期:</label>
            <div class="input-group">
              <input type="date" class="form-control" [ngModel]="queryParams.ProductionDateStart" 
                     (ngModelChange)="queryParams.ProductionDateStart = $event; onProductionDateChange()" 
                     name="ProductionDateStart">
              <span class="input-group-text">至</span>
              <input type="date" class="form-control" [ngModel]="queryParams.ProductionDateEnd" 
                     (ngModelChange)="queryParams.ProductionDateEnd = $event; onProductionDateChange()" 
                     name="ProductionDateEnd">
              <button class="btn btn-outline-secondary" type="button" 
                      (click)="clearProductionDate()" 
                      title="清空日期">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">到期日期:</label>
            <div class="input-group">
              <input type="date" class="form-control" [ngModel]="queryParams.ExpiryDateStart" 
                     (ngModelChange)="queryParams.ExpiryDateStart = $event; onExpiryDateChange()" 
                     name="ExpiryDateStart">
              <span class="input-group-text">至</span>
              <input type="date" class="form-control" [ngModel]="queryParams.ExpiryDateEnd" 
                     (ngModelChange)="queryParams.ExpiryDateEnd = $event; onExpiryDateChange()" 
                     name="ExpiryDateEnd">
              <button class="btn btn-outline-secondary" type="button" 
                      (click)="clearExpiryDate()" 
                      title="清空日期">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="d-flex align-items-center mb-2">
            <label class="form-label mb-0 me-2" style="width: 80px;">批次号:</label>
            <input type="text" class="form-control" [(ngModel)]="queryParams.BatchNumber" name="BatchNumber" placeholder="请输入批次号">
          </div>
        </div>
        
        <div class="col-md-8 text-end">
          <button class="btn btn-secondary me-2" type="button" (click)="reset()">重置</button>
          <button class="btn btn-primary" type="submit">查询</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 操作按钮区域 -->
  <div class="card-body border-bottom">
    <button class="btn btn-secondary me-2" type="button" (click)="refresh()">
      <i class="fa fa-refresh me-1"></i>刷新
    </button>
    <button class="btn btn-secondary" type="button" (click)="exportData()">
      <i class="fa fa-download me-1"></i>导出
    </button>
  </div>
  
  <!-- 加载指示器 -->
  <div *ngIf="loading" class="card-body text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2">正在加载数据，请稍候...</p>
  </div>
  
  <!-- 数据表格区域 -->
  <div class="card-body" *ngIf="!loading">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th width="40"><input type="checkbox"></th>
            <th width="60">序号</th>
            <th>货品编号</th>
            <th>货品名称</th>
            <th>货品类型</th>
            <th>规格型号</th>
            <th>单位</th>
            <th>批次号</th>
            <th>数量</th>
            <th>生产日期</th>
            <th>过期日期</th>
            <th>仓库</th>
            <th>库位</th>
            <th>状态</th>
            <th>备注</th>
            <th width="80">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of dataList; let i = index">
            <td><input type="checkbox"></td>
            <td>{{ i + 1 }}</td>
            <td>{{ item.goodsCode }}</td>
            <td>{{ item.goodsName }}</td>
            <td>{{ item.goodsType }}</td>
            <td>{{ item.specification }}</td>
            <td>{{ item.unit }}</td>
            <td>{{ item.batchNumber }}</td>
            <td>{{ item.currentStock }}</td>
            <td>{{ item.productionDate }}</td>
            <td>{{ item.expiryDate }}</td>
            <td>{{ item.warehouseName }}</td>
            <td>{{ item.locationName }}</td>
            <td>
              <span class="badge" [ngClass]="{
                'bg-success': item.status === '正常',
                'bg-warning': item.status === '即将过期',
                'bg-danger': item.status === '已过期'
              }">{{ item.status }}</span>
            </td>
            <td>{{ item.remark }}</td>
            <td>
              <button class="btn btn-sm btn-outline-primary" (click)="viewDetail(item)">
                <i class="fa fa-eye"></i> 查看
              </button>
            </td>
          </tr>
          <tr *ngIf="dataList.length === 0">
            <td colspan="16" class="text-center py-3">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 分页区域 -->
  <div class="card-footer d-flex justify-content-between align-items-center" *ngIf="!loading && dataList.length > 0">
    <div>
      共 {{ total }} 条
    </div>
    <div class="d-flex align-items-center">
      <div class="me-3">
        <select class="form-select form-select-sm" [(ngModel)]="pageSize" (change)="pageSizeChange($event.target.value)">
          <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}条/页</option>
        </select>
      </div>
      <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm mb-0">
          <li class="page-item" [class.disabled]="pageIndex === 1">
            <a class="page-link" href="javascript:;" (click)="pageIndexChange(1)">&laquo;&laquo;</a>
          </li>
          <li class="page-item" [class.disabled]="pageIndex === 1">
            <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex - 1)">&laquo;</a>
          </li>
          
          <!-- 动态生成页码按钮 -->
          <li class="page-item" *ngFor="let page of getPageNumbers()" [class.active]="pageIndex === page">
            <a class="page-link" href="javascript:;" (click)="pageIndexChange(page)">{{ page }}</a>
          </li>
          
          <li class="page-item" [class.disabled]="pageIndex === maxPageCount">
            <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex + 1)">&raquo;</a>
          </li>
          <li class="page-item" [class.disabled]="pageIndex === maxPageCount">
            <a class="page-link" href="javascript:;" (click)="pageIndexChange(maxPageCount)">&raquo;&raquo;</a>
          </li>
        </ul>
      </nav>
      <div class="ms-3">
        <div class="input-group">
          <input
            type="number"
            class="form-control form-control-sm"
            style="width: 60px;"
            [(ngModel)]="inputPageNumber"
            min="1"
            [max]="maxPageCount"
            (change)="onPageInputChange($event)"
            (keyup)="onPageInputKeyUp($event)"
          />
          <button class="btn btn-sm btn-outline-secondary" type="button" (click)="goToPage(inputPageNumber)">跳转</button>
        </div>
      </div>
    </div>
  </div>
</div>
